<template>
	<view>
		
		<!--商圈 -->
		<view class="top-bg">
			<image :src="config.sq_image" class="top-image"></image>
		</view>
		
		<scroll-view
		scroll-x="true" 
		class="scroll" 
		scroll-with-animation="true"
		@scroll="scroll"
		:scroll-into-view="recommendEnd"
		>
			<view class="category-box">
				<view class="category-item" 
				v-for="(item,index) in categoryList" :key="index"
				@click="changeCategory(item.id)"
				>
					<image :src="item.image" class="category-image"></image>
					<text  class="category-title text-cut">{{item.name||''}}</text>
				</view>
			</view>
	
		</scroll-view>
		
		<view class="flex align-center justify-center">
			<view class="progressBg" v-if="categoryList.length > 5">
				<view class="progressAction" :style="{marginLeft: `${progressMargin}%`}"></view>
			</view>
		</view>
		
		<view class="item" v-for="(item,index) in dataList" :key="index">
			<view class="header-box">
				<image :src="item.image" class="avatar-image"></image>
				
				<view class="flex flex-direction justify-between">
					<text class="nickname text-cut">{{item.name || ''}}</text>
					<text class="tips text-cut" v-if="item.goodlist.length === 0">暂无商品</text>
				</view>
				
				<view class="enter-shop" @click="$wanlshop.to('/pages/shop/index?id='+item.id)">进店</view>
			</view>
			
			<view class="body-box" v-if="item.goodlist.length > 0">
				<view class="product-item" 
				v-for="(itemgoods,indexgoods) in item.goodlist" 
				:key="indexgoods"
				 @click.stop="onGoods(itemgoods.id)"
				>
					<view>
						<image :src="itemgoods.image" 
						class="product-image"
						mode="aspectFill"
						></image>
					</view>
					
					<view class="product-title text-cut">{{itemgoods.title||''}}</view>
					<view class="product-price">{{itemgoods.price||'0'}}</view>
				</view>
			</view>
			
		</view>
		
		
		<uni-load-more :status="status" :content-text="contentText" />
		
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			recommendEnd:'',
			progressMargin:0,
			categoryList:[],
			curId:0, //当前分类ID
			
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			config:{},
		}
	},
	onLoad() {
		this.getCategory();
		
		this.loadData();
		
		this.getConfig();
	},
	onPullDownRefresh() {
		this.curId = 0;
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		getConfig(){
			uni.request({
				url: '/index/config',
				method: 'GET',
				data: {},
				success: res => {
					this.config = res.data;
				}
			});
		},
		async loadData() {
			let request = {
				page: this.current_page,
			};
			
			if(this.curId){
				request.id = this.curId;
			}
			
			await uni.request({
				url: '/index/sqshoplist',
				method: 'GET',
				data: request,
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data);//数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		getCategory(){
			uni.request({
				url: '/index/sqlist',
				method: 'GET',
				data: {
					page: this.current_page,
					type: this.type,
				},
				success: res => {
					this.categoryList = res.data;
				}
			});
		},
		changeCategory(id){
			this.curId = id;
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		scroll(event) {
			//console.log("距离每个边界距离" + event.detail.scrollWidth);
			var num1 = event.detail.scrollWidth / 2;
			var num2 = event.detail.scrollLeft;
			var p = (num2 / num1) * 100;
			//console.log("距离x距离" + event.detail.scrollLeft, p, Math.round(p));
			
			this.progressMargin = Math.round(p);
			//console.log("percent==>" + this.progressMargin);
			
			if (this.progressMargin < 0) {
				this.progressMargin = 0;
			}
			
			if (this.progressMargin >=22) {
				this.progressMargin = 50;
			}
		
		},
	}
}	
</script>

<style lang="scss" scoped>
.item{
	margin: 0rpx 24rpx 24rpx 24rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 24rpx;
}
	
.header-box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.avatar-image{
	width: 90rpx;
	height: 90rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	background: #FFFFFF;
	margin-right: 28rpx;
	flex-shrink: 0;
}
.nickname{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	width: 450rpx;
}

.enter-shop{
	width: 129rpx;
	height: 50rpx;
	background: #366BEB;
	border-radius: 24rpx;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}

.product-image{
	width: 210rpx;
	height: 210rpx;
	border-radius: 20rpx;
}

.product-title{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	margin-top: 16rpx;
	margin-bottom: 12rpx;
	width: 210rpx;
	text-align: center;
}

.product-price{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #F53938;
}

.product-item{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.body-box{
	display: flex;
	justify-content: space-between;
	margin-top: 24rpx;
}

.category-image{
	width: 96rpx;
	height: 96rpx;
}

.category-title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 25rpx;
	width: 96rpx;
	text-align: center;
}

.category-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 57rpx;
}

.category-box{
	display: flex;
	padding: 42rpx 24rpx 32rpx 24rpx;
	background-color: #ffffff;
	margin-bottom: 24rpx;
}

.progressAction{
    width: 30rpx;
    height: 6rpx;
    border-radius: 20rpx;
    background-color: $MAIN_COLOR;
}

.progressBg {
    width: 60rpx;
    height: 6rpx;
    border-radius: 20rpx;
    background-color: #e5f1f1;
	margin-bottom: 32rpx;
}

.top-bg{
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-image{
	width: 702rpx;
	height: 395rpx;
	border-radius: 20rpx;
}

.tips{
	font-size: 22rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-top: 20rpx;
}
</style>